<template>
  <!-- 封装弹框 -->
  <div class="popup">
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :width="popupWidth"
      :before-close="handleClose"
    >
      <slot> </slot>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="Save">確定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    props: {
      dialogTitle: {
        type: String,
        default: "標題",
      },
      visible: {
        type: Boolean,
        default: false,
      },
      popupWidth: {
        type: String,
        default: "550px",
      },
    },
    computed: {
      dialogVisible: {
        get() {
          return this.visible
        },
        set(val) {
          // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
          this.$emit("updateVisible", val)
        },
      },
    },
    methods: {
      Cancel() {
        this.$emit("resetPopupData")
      },
      Save() {
        this.$emit("submitPopupData")
      },
      handleClose() {
        this.$emit("handleClose")
      },
    },
  }
</script>
